<template>
  <div id="comboListDetail">
    <el-card>
      <div class="header">
        <h3>{{ detail.name }}</h3>
        <div v-if="$api.buttonPower(66)">
          <el-button @click="editButton" type="primary" v-if="user.level == 1">编辑</el-button>
          <el-button @click="editButton" type="primary" v-if="user.level == 11">设置</el-button>
          <el-button @click="changeStatus($api.Enum.StatusDisable, '停用')" v-if="detail.status == $api.Enum.StatusActive">停用</el-button>
          <el-button @click="changeStatus($api.Enum.StatusActive, '激活')" v-if="detail.status != $api.Enum.StatusActive">激活</el-button>
          <el-button @click="changeStatus($api.Enum.StatusDelete, '删除')" v-if="detail.status != $api.Enum.StatusActive && user.level == 1">删除</el-button>
        </div>

      </div>
      <div class="content">
        <el-descriptions :colon="false" label-class-name="dialogLabel" content-class-name="content" :column="2">
<!--          <el-descriptions-item label="数据编号">{{ detail.id }}</el-descriptions-item>-->
          <el-descriptions-item label="套餐编码">{{ detail.code }}</el-descriptions-item>
          <el-descriptions-item label="显示名称">{{ detail.title }}</el-descriptions-item>
          <el-descriptions-item label="套餐名称">{{ detail.name }}</el-descriptions-item>
          <el-descriptions-item label="周期类型">{{ detail.cycle_mode_name }}</el-descriptions-item>
          <el-descriptions-item label="销售模式">{{ detail.sale_mode_name }}</el-descriptions-item>
          <el-descriptions-item label="佣金">{{ detail.rebate_type_name}} {{detail.rebate_value}} <span v-if="detail.rebate_value>0">{{detail.rebate_type==1?'%':'元'}}</span></el-descriptions-item>
<!--          <el-descriptions-item label="商户成本价">{{ detail.agent_cost_price }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="商户设置最大价格">{{ detail.agent_max_price }}</el-descriptions-item>-->
          <el-descriptions-item label="包类型">{{ detail.package_type_name }}</el-descriptions-item>
          <el-descriptions-item label="套餐类型">{{ detail.combo_type_name }}</el-descriptions-item>
          <el-descriptions-item label="追加信息">{{ detail.additional }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag type="danger" v-if="detail.status === $api.Enum.StatusDisable">{{ detail.status_name }}</el-tag>
            <el-tag v-else type="success">{{ detail.status_name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="排序">{{ detail.sort }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions :colon="false" label-class-name="dialogLabel" content-class-name="content" :column="2">
          <el-descriptions-item label="流量/MB">{{ detail.flow }}</el-descriptions-item>
          <el-descriptions-item label="语音">{{ detail.voice }}</el-descriptions-item>
          <el-descriptions-item label="短信">{{ detail.sms }}</el-descriptions-item>
          <el-descriptions-item label="产考流量">{{ detail.refer_flow }}</el-descriptions-item>
          <el-descriptions-item label="周期月">{{ detail.effect_month }}</el-descriptions-item>
          <el-descriptions-item label="销售价/元">{{ detail.sale_price }}</el-descriptions-item>
          <el-descriptions-item label="成本价">{{ detail.cost_price }}</el-descriptions-item>
        </el-descriptions>

      </div>

    </el-card>

    <!-- 管理员编辑对话框 -->
    <el-dialog custom-class="dialogClass" title="套餐编辑" :close-on-click-modal="false" :visible.sync="edit_box.show" width="50%" :append-to-body="true">
      <el-form :model="edit_box.form" ref="editRef" :rules="editRules" label-position="top" class="dialogForm">
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="edit_box.form.name" placeholder="请输入套餐名称"></el-input>
        </el-form-item>

        <el-form-item label="套餐编码" prop="code">
          <el-input v-model="edit_box.form.code" placeholder="请输入套餐编码"></el-input>
        </el-form-item>

        <el-form-item label="成本价/元" prop="cost_price">
          <el-input v-model="edit_box.form.cost_price" placeholder="请输入成本价"></el-input>
        </el-form-item>

        <el-form-item label="语音/分钟" prop="voice">
          <el-input v-model="edit_box.form.voice" placeholder="请输入语音分钟"></el-input>
        </el-form-item>

        <el-form-item label="流量/MB" prop="flow">
          <el-input v-model="edit_box.form.flow" placeholder="请输入流量数量"></el-input>
        </el-form-item>

        <el-form-item label="短信/条" prop="sms">
          <el-input v-model="edit_box.form.sms" placeholder="请输入短信数量"></el-input>
        </el-form-item>

        <el-form-item label="有效月" prop="effect_month">
          <el-input v-model="edit_box.form.effect_month" placeholder="请输入有效月"></el-input>
        </el-form-item>

        <el-form-item label="产考流量/MB" prop="refer_flow">
          <el-input v-model="edit_box.form.refer_flow" placeholder="请输入参考流量"></el-input>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="info" @click="edit_box.show = false">取消</el-button>
          <el-button type="success" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 代理商编辑对话框 -->
    <el-dialog custom-class="dialogClass" title="套餐设置" :close-on-click-modal="false" :visible.sync="agent_edit_box.show" width="50%" :append-to-body="true">
      <el-form :model="agent_edit_box.form" ref="agent_edit_box_ref" :rules="agent_edit_box.rules" class="dialogForm" label-position="top">
        <el-form-item label="显示名称" prop="title">
          <el-input v-model="agent_edit_box.form.title" placeholder="请输入用户显示名称"></el-input>
        </el-form-item>
        <el-form-item label="销售价格/元" prop="sale_price">
          <el-input v-model="agent_edit_box.form.sale_price" placeholder="请输入销售价格"></el-input>
        </el-form-item>
<!--        <div v-for="(item, index) in agentEditForm.facevalue" :key="index" class="pay">-->
<!--          <el-form-item label="充值面值" :prop="`facevalue[${index}].pay_amount`" :rules="agentEditRules.pay_amount">-->
<!--            <el-input v-model="item.pay_amount" placeholder="请输入充值金额"></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="面值金额" :prop="`facevalue[${index}].face_amount`" :rules="agentEditRules.face_amount">-->
<!--            <el-input v-model="item.face_amount" placeholder="请输入面值金额"></el-input>-->
<!--          </el-form-item>-->
<!--        </div>-->
        <el-form-item label="回扣" prop="rebate_value">
          <el-input v-model="agent_edit_box.form.rebate_value" class="input-with-select">
            <el-select v-model="agent_edit_box.form.rebate_type" slot="prepend" :clearable="false">
              <el-option label="比例" value="1"></el-option>
              <el-option label="金额" value="2"></el-option>
            </el-select>
            <span slot="append">{{agent_edit_box.form.rebate_type == 1? '%': '元'}}</span>
          </el-input>
        </el-form-item>
        <el-form-item label="用户显示排序" prop="sort">
          <el-input v-model="agent_edit_box.form.sort" placeholder="请输入用户显示排序"></el-input>
        </el-form-item>
        <el-form-item class="buttonBox">
          <el-button type="info" @click="agent_edit_box.show = false">取消</el-button>
          <el-button type="success" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { number } from "echarts";
export default {
  name: "WuliankaCombolistedit",
  props: {
    request:{
      id: Number
    }
  },
  data() {
    return {
      user:{},
      detail: {},
      is_change: false,
      edit_box: {
        show: false,
        form:{
          id: '',
          name: '',
          code: '',
          cost_price: '',
          voice: '',
          flow: '',
          sms: '',
          effect_month: '',
          refer_flow: ''
        }
      },
      editRules: {
        name: { required: true, message: "请输入套餐编号", trigger: "blur" },
        code: { required: true, message: "请输入套餐编号", trigger: "blur" },
        cost_price: {
          required: true,
          message: "请输入套餐编号",
          trigger: "blur"
        },
        ivoice: { required: true, message: "请输入套餐编号", trigger: "blur" },
        flow: { required: true, message: "请输入套餐编号", trigger: "blur" },
        sms: { required: true, message: "请输入套餐编号", trigger: "blur" },
        effect_month: {
          required: true,
          message: "请输入套餐编号",
          trigger: "blur"
        },
        refer_flow: {
          required: true,
          message: "请输入套餐编号",
          trigger: "blur"
        }
      },
      // 商户编辑
      agent_edit_box:{
        show: false,
        form: {
          id: '',
          title: '',
          sale_price: '',
          rebate_type: '1',
          rebate_value: '1',
          sort: '',
          status: '',
          facevalue: [{
            pay_amount: '',
            face_amount: ''
          }]
        },
        rules:{
          title: { required: true, message: "请输入套餐编号", trigger: "blur" },
          sale_price: {
            required: true,
            message: "请输入套餐编号",
            trigger: "blur"
          },
          rebate_type: {
            required: true,
            message: "请选择佣金类型",
            trigger: "blur"
          },
          rebate_value: {
            required: true,
            message: "请输入佣金",
            trigger: "blur"
          },
          sort: { required: true, message: "请输入套餐编号", trigger: "blur" },

          // pay_amount: {
          //   required: true,
          //   message: "请输入套餐编号",
          //   trigger: "blur"
          // },

          // face_amount: {
          //   required: true,
          //   message: "请输入套餐编号",
          //   trigger: "blur"
          // }
        }
      },
      // agentEditForm: ,
      // agentEditRules:
    };
  },

  mounted() {
    this.user = JSON.parse(localStorage.getItem("userData"))
    this.getDetail()
  },
  beforeDestroy(){
    this.close()
  },

  methods: {
    getDetail() {
      if (!this.request.id){
        return
      }
      this.$api.combo.comboDetail( this.request, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.detail = res.data;
      });
    },
    editButton() {
      if (this.user.level == "1") {
        this.edit_box.show = true;
        this.edit_box.form.id = this.detail.id;
        this.edit_box.form.name = this.detail.name;
        this.edit_box.form.code = this.detail.code;
        this.edit_box.form.cost_price = this.detail.cost_price;
        this.edit_box.form.voice = this.detail.voice;
        this.edit_box.form.flow = this.detail.flow;
        this.edit_box.form.sms = this.detail.sms;
        this.edit_box.form.effect_month = this.detail.effect_month;
        this.edit_box.form.refer_flow = this.detail.refer_flow;
      } else if (this.user.level == "11") {
        this.agent_edit_box.show = true;
        this.agent_edit_box.form.id = this.detail.id;
        this.agent_edit_box.form.title = this.detail.title;
        this.agent_edit_box.form.sale_price = this.detail.sale_price;
        this.agent_edit_box.form.rebate_type = this.detail.rebate_type == 0 ? '1' : this.detail.rebate_type.toString();
        this.agent_edit_box.form.rebate_value = this.detail.rebate_value;
        this.agent_edit_box.form.sort = this.detail.sort;
        this.agent_edit_box.form.status = this.detail.status;
        this.agent_edit_box.form.facevalue.forEach(element => {
          element.pay_amount = this.detail.pay_amount;
          element.face_amount = this.detail.face_amount;
        });
      } else {
        this.$message.error("没有操作权限!");
      }
    },
    submitForm() {
      var level = JSON.parse(localStorage.getItem("userData")).level;
      if (level == "1") {
        this.$refs.editRef.validate(valid => {
          if (!valid) {
            return this.$message.error("请输入完整表单信息");
          }
          let body = this.$tool.copyJSON(this.edit_box.form)
          body.id = Number(body.id);
          body.cost_price = Number(body.cost_price);
          body.voice = Number(body.voice);
          body.flow = Number(body.flow);
          body.sms = Number(body.sms);
          body.effect_month = Number(body.effect_month);
          body.refer_flow = Number(body.refer_flow);
          this.$api.combo.comboEdit(body, res => {
            if (!res.status) {
              return this.$message.error(res.message);
            }
            this.edit_box.show = false;
            this.getDetail()
            this.$message.success("修改成功");
            this.is_change = true
          });
        });
      } else if (level == "11") {
        this.$refs.agent_edit_box_ref.validate(valid => {
          if (!valid) {
            return this.$message.error("请完善表单数据");
          }
          let body = this.$tool.copyJSON(this.agent_edit_box.form)
          body.sale_price = Number(body.sale_price)
          body.rebate_type = Number(body.rebate_type)
          body.rebate_value = Number(body.rebate_value)
          body.sort = Number(body.sort)
          body.facevalue.forEach(element => {
            element.pay_amount = Number(element.pay_amount);
            element.face_amount = Number(element.face_amount);
          });

          this.$api.combo.comboEditAgent(body, res => {
            if (!res.status) {
              return this.$message.error(res.message);
            }
            this.agent_edit_box.show = false;
            this.getDetail()
            this.$message.success("编辑成功");
            this.is_change = true
          });
        });
      }
    },
    changeStatus(status, text) {
      this.$confirm(`确定${text}套餐?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.combo.comboStatus({id: this.detail.id, status: status}, res => {
          if (!res.status) {
            return this.$message.error(res.message);
          }
          this.is_change = true
          this.$message.success('操作成功!')
          if (status == this.Enum.StatusDelete){
            return this.$destroy();
          }
          this.getDetail()
        });
      })
    },
    close(){
      this.$emit('close', {is_change:this.is_change})
    },
  }
};
</script>

<style lang="less">
#comboListDetail {
  .label {
    width: 100px;
    text-align-last: justify;
    display: inline-block;
    font-weight: bold;
  }
}
</style>
<style lang="less" scoped>
#comboListDetail {
  padding: 0 20px;
}

.header {
  display: flex;
  justify-content: space-between;
}

.content {
  margin-top: 20px;

  .el-descriptions {
    margin-bottom: 20px;
  }

}

.pay {
  width: 50%;
  display: flex;
  justify-content: space-between;
}
</style>